import React, { Component } from "react";
import {withRouter} from "react-router-dom";
import style from "./index.module.scss";
import { Badge, TabBar } from "antd-mobile";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";

const tabs = [
  {
    key: "/Home",
    title: "首页",
    icon: <AppOutline />,
    badge: Badge.dot,
  },
  {
    key: "/Classify",
    title: "分类",
    icon: <UnorderedListOutline />,
    badge: "5",
  },
  {
    key: "/a",
    title: "全部商品",
    icon: (active) => (active ? <MessageFill /> : <MessageOutline />)
  },
  {
    key: "/ShoppingCar",
    title: "购物车",
    icon: <UserOutline />,
  },
  {
    key: "/My",
    title: "个人中心",
    icon: <UserOutline />,
  }
];

class Footer extends Component {

  setRouteActive = (value) => {
    console.log("value",value);
    // history.push(value)
    this.props.history.push(value);
  }

  render() {
    console.log("this.props",this.props);
    return (
      <TabBar activeKey={this.props.location.pathname} onChange={(value) => this.setRouteActive(value)}>
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    );
  }
}


export default  withRouter(Footer);